import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import pxToViewport from 'postcss-px-to-viewport'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  const platform = env.VITE_PLATFORM || 'web'
  
  // 基础配置
  const config = {
    plugins: [vue()],
    define: {
      'process.env': env
    },
    server: {
      port: 3000,
      open: true
    },
    build: {
      outDir: `dist/${platform}`,
      sourcemap: false
    }
  }
  
  // H5和小程序配置px转viewport
  if (platform === 'h5' || platform === 'mp') {
    config.css = {
      postcss: {
        plugins: [
          pxToViewport({
            viewportWidth: 375, // 设计稿宽度
            viewportHeight: 667, // 设计稿高度
            unitPrecision: 3, // 转换精度
            viewportUnit: 'vw', // 转换单位
            selectorBlackList: ['.ignore', '.hairlines'], // 不转换的类
            minPixelValue: 1, // 最小转换像素
            mediaQuery: false // 媒体查询中是否转换
          })
        ]
      }
    }
  }
  
  return config
})
